<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图书馆志愿者管理系统</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
</head>

<body>
<!---------------------------------H---------e-----a-----d------e---------r-------------------------------------->
<div id="header">
  <div id="logo"><a href="#"><img src="images/sample_02.gif" width="481" height="100" /></a></div>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Message</a></li>
      <li><a href="#">Vote</a></li>
      <li><a href="#">Takein</a></li>
      <li><a href="#">Imformation</a></li>
      <li><a href="#">About</a></li>
  </ul>
</div>
<!--------------------------------S----------------l----------i--------d------e----and---------------nav--------->
<div id="slideandnav">
 			<div id="banner_index"> 
  				<div id="banner1_index">
        				 <div id="banner_info1_index" style="display:block;">
                				<h2><a href="http://www.hhxin.com/" title="北京节日返程客流高峰初现">北京节日返程客流高峰初现</a></h2>
		   							 <p id="banner_text_index">
		   当日是国庆长假临近尾声，外出游玩或探亲的旅客陆续回京，北京西站到达人数出现增长态势。 ...
           							<a  href="http://www.hhxin.com/">详细>></a>
		   							</p>
		   				</div>  
     	     			<div id="banner_info1_index" style="display:none;">
						  <h2><a href="http://www.hhxin.com/" title="江苏南钢炼铁厂铁水外溢已致11人遇难">江苏南钢炼铁厂铁水外溢已致11人遇难</a></h2>
								<p id="banner_text_index"> 10月5日上午11时45分，南钢炼铁厂5号炉淘汰停炉准备过程中发生铁水意外溢出事故，记者20时从南京钢铁股份有限公司了解到，该公司炼铁厂...		  
                                <a  href="http://www.hhxin.com/">详细>></a>
		   						</p>
		   				</div>  
     	     			<div id="banner_info1_index" style="display:none;">
		     					<h2><a href="http://www.hhxin.com/" title="国庆节各地现“人海”景观">国庆节各地现“人海”景观</a></h2>
		   						<p id="banner_text_index">
		   十一黄金周，许多人选择外出旅行，导致国庆节期间全国各地的热门景点出现了“人海”景观。...		  
           						<a  href="http://www.hhxin.com/">详细>></a>
		   						</p>
		   				</div>  
     	     			<div id="banner_info1_index" style="display:none;">
		     					<h2><a href="http://www.hhxin.com/" title="“醉爱”家乡美 中央大街“国庆”组图">“醉爱”家乡美 中央大街“国庆”组图</a></h2>
		   						<p id="banner_text_index"> “没有到过中央大街，就不能说来过哈尔滨”。在中华人民共和国成立62周年之际，中央大街悬挂国旗，布满鲜花，盛装接待中外游人。...		  <a  href="http://www.hhxin.com/">详细>></a>
		   						</p>		
		   				</div>  
     	     			<div id="banner_info1_index" style="display:none;">
		     					<h2><a href="http://www.hhxin.com/" title="装修建材金秋抄底团购盛会开始啦">装修建材金秋抄底团购盛会开始啦</a></h2>
		   
		   						<p id="banner_text_index">黑龙江网络广播电视台在十一期间举行建材家居团购活动，联合幸福建材网及百余建材品牌一站引爆，家装建材联盟金秋抄底团购盛会开始啦...		  <a  href="http://www.hhxin.com/">详细>></a>

		  						</p>
		   				</div>  
				</div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <div id="banner_list_index">
                    <a href="http://www.hhxin.com/" style="display:block;" target="_black" title="北京节日返程客流高峰初现"><img id="tupian_0" src="http://upload.hljtv.com/2011/1006/1317865957457.jpg" thissrc="http://upload.hljtv.com/2011/1006/1317865957457.jpg" width="610" height="285"/></a> 
                    <a href="http://www.hhxin.com/" style="display:none;" target="_black" title="江苏南钢炼铁厂铁水外溢已致11人遇难"><img id="tupian_1" thissrc="http://upload.hljtv.com/2011/1005/1317827043473.jpg" width="610px" height="285"/></a> 
                    <a href="http://www.hhxin.com/" style="display:none;" target="_black" title="国庆节各地现“人海”景观"><img id="tupian_2" thissrc="http://upload.hljtv.com/2011/1005/1317779239301.jpg" width="610" height="285"/></a> 
                    <a href="http://www.hhxin.com/" style="display:none;" target="_black" title="“醉爱”家乡美 中央大街“国庆”组图"><img id="tupian_3" thissrc="http://upload.hljtv.com/2011/1004/1317691174948.jpg" width="610" height="285"/></a> 
                    <a href="http://www.hhxin.com/" style="display:none;" target="_black" title="装修建材金秋抄底团购盛会开始啦"><img id="tupian_4" thissrc="http://upload.hljtv.com/2011/0922/1316674531444.jpg" width="610" height="285"/></a> 
                </div>
			</div>
            
			<script type="text/javascript">
               $(document).ready(function() {
                  for(var $i=0;$i<5;$i++){
            $("#tupian_"+$i).attr("src",$("#tupian_"+$i).attr("thissrc"));
            
                }
                
            
               });
            
            
             </script>
            
            <script type="text/javascript">
                var tt = nn = 0,count,ncount;
                $().ready(function(){    
                    count=$("#banner_list_index a").length;  
                    $("#banner_list_index a:not(:first-child)").hide();
                    $("#banner1_index div:not(:first-child)").hide();
                    $("#banner_index li").click(function(){
                      var i = $(this).text() - 1;
                       nn = i;
                       if (i >= ncount){return};
                        $("#banner_list_index a").filter(":visible").hide().parent().children().eq(i).show();
                        $("#banner1_index div").filter(":visible").hide().parent().children().eq(i).show();
                        $(this).css({"background":"#464543",'color':'#464543'}).siblings().css({"background":"#5E5D5B",'color':'#5E5D5B'});    
                    });
                    tt = setInterval("showindex()",4000);
                    $("#banner_index").hover(
                     function(){
                      clearInterval(tt);
                     }, 
                     function(){
                      tt = setInterval("showindex()", 4000);
                     }
                    );  
                })
                
                function showindex()
                {
                    nn = nn >=(count - 1) ? 0 : ++nn;
                    $("#banner_index li").eq(nn).trigger('click');
                }
            </script>
  
  <div id="login">
    <h1 style=" color:white;font-size:24px; margin:10px 10px; border-bottom:1px dashed white;font-family:"Myriad pro", Helvetica, sans-serif;padding:2px; ">Login</h1>
    <form action="#">
      <p style="color:white;width:280px; margin-top:20px;"><span style=" font-size:18px; margin-left:10px;margin-top:10px; border-bottom:1px dashed white;font-family: Helvetica, sans-serif; ">username: </span>       	
                      <input type="text" name="username" style="float:right; width:160px; height:30px;border-style:none;" />
      </p>
      <p style=" color:white;width:280px; margin-top:20px;"><span style=" font-size:18px; margin-left:10px; margin-top:10px;border-bottom:1px dashed white;font-family: Helvetica, sans-serif; ">password:</span>
                    <input type="text" name="password" style="float:right; width:160px; height:30px;border-style:none;" />
      </p>
      <p style="color:white;width:280px; margin-top:20px;"><span style=" font-size:18px; margin-left:10px;margin-top:10px; border-bottom:1px dashed white;font-family: Helvetica, sans-serif; ">type:</span>
        <select name="type" style="margin-left:65px; width:160px; height:30px;border-style:none;">
          <option value="student" >student</option>
          <option value="volunteer">volunteer</option>
          <option value="administrator">administrator</option>
        </select>
      </p>
                    <input type="button" value="Login" style="border-style:none; background-color:white;margin-left:10px; margin-top:10px; width:122px; height:30px;"/><input type="button" value="register" style="border-style:none; background-color:white;margin-left:25px; margin-top:10px; width:122px; height:30px;" />
    </form> 
    <a href="#" style="margin-left:10px;color:white;" >忘记密码？点这里</a>
  </div>
	
</div>

<div id="content">
       <div id="paragraphs">
        <p class="paragraph"><span>BEAUTIFUL</span><br />
                      <a href="#">HomeHomeHomeHomeHomeHomeHomeHome</a>
                      <a href="#">MessageHomeHomeHomeHomeHomeHome</a>
                      <a href="#">VoteHomeHomeHomeHomeHome</a>
                      <a href="#">TakeinHomeHomeHomeHome</a>
                      <a href="#">ImformatioHomeHomeHomeHomeHomen</a>
                      <a href="#">HomHomeHomeHomeHomee</a>
                      <a href="#">MesHomeHomevsMessageage</a>
                      <a href="#">VoHomeHomeHomeMessagete</a>
                      <a href="#">TaHomeHomekeinMessage</a>
                      <a href="#">ImfoHomeHomeHomermation</a>
	   </p>  
       <p class="paragraph"><span>EFFECTIVE</span>  <br />
					  <a href="#">HomeHomeHomeHomeHomeHomeHomeHome</a>
                      <a href="#">MessageHomeHomeHomeHomeHomeHome</a>
                      <a href="#">VoteHomeHomeHomeHomeHome</a>
                      <a href="#">TakeinHomeHomeHomeHome</a>
                      <a href="#">ImformatioHomeHomeHomeHomeHomen</a>
                      <a href="#">HomHomeHomeHomeHomee</a>
                      <a href="#">MesHomeHomevsMessageage</a>
                      <a href="#">VoHomeHomeHomeMessagete</a>
                      <a href="#">TaHomeHomekeinMessage</a>
                      <a href="#">ImfoHomeHomeHomermation</a>
	   </p>
	   <p class="paragraph">
       <span>FUNCTIONAL</span>  <br />
       				  <a href="#">HomeHomeHomeHomeHomeHomeHomeHome</a>
                      <a href="#">MessageHomeHomeHomeHomeHomeHome</a>
                      <a href="#">VoteHomeHomeHomeHomeHome</a>
                      <a href="#">TakeinHomeHomeHomeHome</a>
                      <a href="#">ImformatioHomeHomeHomeHomeHomen</a>
                      <a href="#">HomHomeHomeHomeHomee</a>
                      <a href="#">MesHomeHomevsMessageage</a>
                      <a href="#">VoHomeHomeHomeMessagete</a>
                      <a href="#">TaHomeHomekeinMessage</a>
                      <a href="#">ImfoHomeHomeHomermation</a>
       </p>
       <p class="paragraph">
       <span>NOTICE</span>  <br />
       				  <a href="#">HomeHomeHomeHomeHomeHomeHomeHome</a>
                      <a href="#">MessageHomeHomeHomeHomeHomeHome</a>
                      <a href="#">VoteHomeHomeHomeHomeHome</a>
                      <a href="#">TakeinHomeHomeHomeHome</a>
                      <a href="#">ImformatioHomeHomeHomeHomeHomen</a>
                      <a href="#">HomHomeHomeHomeHomee</a>
                      <a href="#">MesHomeHomevsMessageage</a>
                      <a href="#">VoHomeHomeHomeMessagete</a>
                      <a href="#">TaHomeHomekeinMessage</a>
                      <a href="#">ImfoHomeHomeHomermation</a>
       </p>
       </div>
</div>
<div style="clear:left;"></div>

<div id="footer">
	<div id="footdemonstration">
		<p style="margin-left:130px;color:white;font-size:15px;font-family: Arial, Helvetica, sans-serif; font-weight:300;margin-top:15px;">2014© Computer Class 5. Design by Terry.</p>
	</div>
    <div id="anchor">
    友情链接：
        <a href="#">广外图书馆志愿者网</a>|
        <a href="#">广东省志愿者网</a>|
        <a href="#">世界大学生志愿者网</a>|
        <a href="#">华南理工大学志愿者网</a>|
        <a href="#">华南理工大学志愿者网</a>|
    </div>
</div>



	
</body>
</html>
